<template>
  <div id="content">
    <van-row v-show="fail_reason && workers_userId == userId && status == 2">
      <van-col
        style="background-color: #fff; color: red; padding: 0 16px"
        span="24"
        >审核不通过原因：{{ fail_reason }}</van-col
      >
    </van-row>
    <van-row
      style="background-color: #fff; padding: 15px 0; text-align: center"
    >
      <van-col span="24">
        <span class="detail_title">{{ title }}</span>
      </van-col>
    </van-row>
    <!-- <van-field label="施工类型：">
      <span slot="input"> 机器</span>
    </van-field> -->
    <van-field label="人员规模：">
      <span slot="input"> {{ staff }}人 </span>
    </van-field>
    <van-field label="所在地区：">
      <span slot="input">
        {{ city }}
      </span>
    </van-field>
    <van-field label="具备技能：">
      <span slot="input">
        <van-tag
          style="margin: 0 5px 5px 0"
          size="large"
          class="tag-blue"
          v-for="(wxtype, index) in wkTypes"
          :key="index"
          >{{ getHasWkType(wxtype) }}</van-tag
        >
      </span>
    </van-field>
    <!-- <van-field label="服务范围：">
      <span slot="input">{{ serve_des }}</span>
    </van-field> -->
    <van-field
      label="详细地址："
      v-if="address_detail != null && address_detail != ''"
    >
      <span slot="input">{{ address_detail }}</span>
    </van-field>
    <van-field label="详细介绍：" v-if="detail != ''">
      <span slot="input">{{ detail }}</span>
    </van-field>

    <div
      style="
        height: 150px;
        padding: 10px;
        text-align: center;
        backgroundcolor: white;
        display: flex;
        justify-content: center;
      "
      v-if="false"
    >
      <vue-qr
        :logoSrc="avatar"
        :margin="5"
        :logoMargin="1"
        :text="qr_url"
        :size="500"
        style="width: 130px; margin-left: 25px"
      ></vue-qr>
      <ul
        style="
          display: flex;
          flex-direction: column;
          flex: 1;
          padding-left: 10px;
          color: #f55318;
          font-size: 15px;
          font-weight: bolder;
        "
      >
        <li style="flex: 1; display: flex; align-items: center">
          长按识别二维码
        </li>
        <li style="flex: 1; display: flex; align-items: center">手机号登录</li>
        <li style="flex: 1; display: flex; align-items: center">
          了解更多涂装行业信息
        </li>
      </ul>
    </div>

    <van-row style="background-color: #fff; margin: 10px 0">
      <van-col span="24" style="padding: 0 5%">
        <p
          class="detailTitle"
          style="font-size: 11px; color: #ee4b15; margin-top: 14px"
        >
          <!-- <span
            style="margin-top:5%;display:inline-block;width:3vh;height:3vh;background:#EE4B15;color:#ffffff;text-align:center;font-weight:blod;border-radius:30px;"
          >！
          </span> &nbsp;&nbsp;&nbsp; -->
        </p>
        <p
          class="detailtext"
          style="font-size: 11px; margin-top: 5px; color: #ee4b15"
        >
          喷喷涂涂提示:
          此信息由喷喷涂涂用户发布，联系时要辨别信息真假谨防上当受骗。
        </p>
      </van-col>
    </van-row>
    <!-- <van-row
      style="background-color: #fff; padding: 20px 0 10px 0; text-align: center"
    >
      <van-col span="24">
        <span class="detail_title">详细介绍</span>
      </van-col>
    </van-row> -->
    <!-- <van-row style="background-color: #fff">
      <van-col span="24">
        <div
          style="
            margin: 10px 16px;
            border: 1px solid #ebedf0;
            background-color: #fff;
            padding: 10px 16px;
          "
        >
          {{ detail ? detail : '暂无详细介绍' }}
        </div>
      </van-col>
    </van-row> -->
    <van-row
      style="background-color: #fff; padding: 4px 0 8px 0"
      v-show="fail_reason && status == 3 && userLevel == 2"
    >
      <van-col span="24" style="text-align: center">
        <span class="detail_title">审核结果</span>
      </van-col>
    </van-row>
    <van-row
      style="background-color: #fff"
      v-show="fail_reason && status == 3 && userLevel == 2"
    >
      <van-col span="24">
        <div
          v-html="fail_reason"
          style="
            margin: 10px 16px;
            border: 1px solid #ebedf0;
            background-color: #fff;
            padding: 10px 16px;
          "
        ></div>
      </van-col>
    </van-row>
    <!-- 详情图 -->
    <!-- <van-row style="background-color: #fff; text-aglin: center">
      <van-col
        style="width: 90%; margin: auto; float: none"
        class="img-container"
      >
        <img
          style="height: 100%"
          :src="image"
          v-for="(image, index) in images.slice(0, 1)"
          :key="index"
        />
      </van-col>
    </van-row> -->
    <!-- <van-row
      style="background-color: #fff; margin-top: 20px; padding: 20px 0 8px 0"
      v-if="list.length != 0"
    >
      <van-col span="24" style="text-align: center">
        <span
          style="
            display: inline-block;
            width: 150px;
            font-size: 16px;
            line-height: 30px;
            border-bottom: 1px solid #ee3f00;
          "
          >更多推荐</span
        >
      </van-col>
    </van-row>
    <van-list
      class="more_recommend"
      v-model="loading"
      :finished="finished"
      :finished-text="list.length > 0 ? '没有更多了' : ''"
      @load="onLoad"
      style="background-color: #fff; padding: 10px 16px"
    >
      <div v-for="item in list" :key="item.id" :title="item">
        <van-row style="padding: 15px 0px 16px" @click="itemClick(item.id)">
          <van-col>
            <img :src="getSrc(item)" width="100px" height="100px" />
          </van-col>
          <van-col
            style="
              position: relative;
              height: 100px;
              padding-left: 10px;
              flex-direction: column;
              display: flex;
              width: calc(100% - 100px);
              height: 100px;
            "
          >
            <div
              style="flex: 1; display: flex"
              :class="item.choiceness ? 'fincell' : null"
            >
              <p
                v-if="item.choiceness"
                style="
                  display: inline-block;
                  display: flex;
                  color: white;
                  width: auto;
                  height: 20px;
                  padding: 2px 3px;
                  font-size: 12px;
                  align-items: center;
                  text-align: center;
                  border-radius: 4px;
                  margin-top: 5px;
                "
                :style="{
                  background: item.choiceness == false ? null : '#86d1a4',
                }"
              >
                {{ item.choiceness == false ? null : '精选' }}
              </p>

              <van-cell
                :title="item.title"
                label-class="item"
                title-class="title"
              ></van-cell>
            </div>
            <div class="van-cell__label item">
              {{ item.detail }}
            </div>
            <div>
              <van-row type="flex" align="center" style="margin-top: 5px">
                <van-col>
                  <van-tag
                    size="large"
                    class="tag-blue"
                    v-if="item.workType.length > 0"
                    >{{ getHasWkType(item.workType[0]) }}</van-tag
                  >
                  <van-tag
                    size="large"
                    class="tag-blue"
                    v-if="item.workType.length > 1"
                    style="margin-left: 3px"
                    >{{ getHasWkType(item.workType[1]) }}</van-tag
                  >
                </van-col>
              </van-row>
              <van-row
                type="flex"
                align="bottom"
                justify="space-between"
                style="margin-top: 5px"
              >
                <van-col style="display: flex; align-items: center">
                  <van-icon name="location-o" color="#969799" />
                  <span class="cell-span" style="margin-left: 3px">{{
                    item.city
                  }}</span>
                </van-col>
                <van-col>
                  <span class="cell-span">{{
                    item.updateTime.substring(0, 10)
                  }}</span>
                </van-col>
              </van-row>
            </div>
          </van-col>
        </van-row>
        <van-divider
          :style="{
            color: 'rgba(187, 187, 187, 0.38)',
            borderColor: 'rgba(187, 187, 187, 0.38)',
          }"
        ></van-divider>
        <div style="width: 100%; background: #f0f1f4" v-show="userId != -1" />
      </div>
    </van-list> -->
    <!-- 查看电话 -->
    <van-row>
      <div
        v-if="shouwAd"
        ref="advertising"
        style="width: 100%; position: fixed; bottom: 41px; padding: 0 0"
      >
        <!-- <img
          :src="qrurl"
          alt=""
          style="
            width: 11%;
            position: absolute;
            z-index: 11;
            height: 100%;
            margin-left: 10px;
          "
        /> -->

        <img :src="botm" alt="" style="width: 100%" />
      </div>
      <!-- <div
        style="
          width: 100%;
          position: fixed;
          bottom: 11%;
          padding: 0 5%;
          height: 45px;
        "
        v-if="shouwAd"
      >
        <img src="" alt="" style="width: 100%; height: 100%" ref="pictures" />
      </div> -->
      <van-col
        style="
          width: 10%;
          height: 2rem;
          position: fixed;
          bottom: 3.3rem;
          right: 2%;
          text-align: center;
        "
        @click="shouwAd = false"
        v-if="shouwAd"
      >
      </van-col>
      <van-col span="24" style="position: fixed; bottom: 0">
        <van-button
          style="
            background-color: #ee3f00;
            color: #fff;
            width: 100%;
            font-size: 16px;
          "
          @click="showTel"
          >{{ telText }}</van-button
        >
      </van-col>
    </van-row>
  </div>
</template>
<script>
import {
  Row,
  Col,
  Field,
  Image,
  List,
  Icon,
  Tag,
  Popup,
  Toast,
  Dialog,
  Divider,
} from 'vant';
import {
  listTeam,
  teamDetail,
  dicItems,
  authInfo,
  userInfo,
  updateDuration,
  cardInfo,
  getOrderSign,
  isAllowedShowTel,
  gethomebuton,
  craqd,
} from '@/api/api';
import html2Canvas from 'html2canvas';
import { setLocalStorage, getLocalStorage } from '@/utils/local-storage';
import logo_default from '@/assets/images/logo.jpg';
import helmet_icon from '@/assets/images/icons/helmet_icon.png';
import location_icon from '@/assets/images/icons/location_icon.png';
import areaList from '@/views/user/module-address-edit/area_all.json';
import wx from 'weixin-js-sdk';
import vueQr from 'vue-qr';
export default {
  name: 'employ-workers-detail',
  props: {
    teamsId: [String, Number],
  },
  data() {
    return {
      isOut: false,
      shouwAd: true,
      telText: '查看联系方式',
      title: '',
      staff: 0,
      helmet_icon: helmet_icon,
      location_icon: location_icon,
      serve_des: '',
      detail: '',
      images: [],
      list: [],
      areaList: areaList,
      area_code: '',
      province: '',
      city: '',
      county: '',
      address: '',
      address_detail: '',
      botm: '',
      directorId: '',
      director_phone: '',
      page: 0,
      limit: 4,
      finished: true,
      loading: false,
      wkTypes: [],
      workType: [],
      tel: '',
      mobile: '',
      wkTypeId: 'INFO.WORK.TYPE',
      fail_reason: '',
      workers_userId: '',
      userId: '',
      status: -1,
      userStatus: 0,
      pages: '',
      isAttention: 0,
      userLevel: 0,
      memberLevel: 0,
      queryParam: {
        page: 0,
        limit: 4,
        areaCode: '',
        skill: -1,
        skills: '',
        staff: -1,
        viewMore: 1,
        teamsId: -1,
        sort: '',
        order: '',
      },
      avatar:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/loecx309uoghxz7yp0hq.png',
      qr_url: '',
      qrurl: '',
      isManager: false,
      //四大板块查看权限
      powerPRSWLevle: 0,
    };
  },
  created() {
    this.initWkType();
    this.init();
    gethomebuton({
      userId: Number(getLocalStorage('userId').userId),
      mode: 20,
    }).then((res) => {
      this.botm = res.data.data[0].image;
    });
    craqd({ userId: Number(getLocalStorage('userId').userId) }).then((res) => {
      this.qrurl = res.data.data;
    });
    this.queryParam.skill = Number(getLocalStorage('valuetwo').valuetwo);
  },
  watch: {
    $route: 'reInit',
  },
  beforeRouteLeave(to, from, next) {
    // 仅适用于本页面不作为H5着陆页的情况
    updateDuration({
      goodsId: this.teamsId,
      url: this.link,
    }).then((res) => {});
    next();
  },
  methods: {
    getHasWkType(wktype_value) {
      for (let i in this.workType) {
        if (wktype_value == this.workType[i].value) {
          return this.workType[i].label;
        }
      }
    },
    initWkType() {
      dicItems({
        groupId: this.wkTypeId,
      })
        .then((res) => {
          let list = res.data.data.list;
          for (let i in list) {
            let opiton = {
              label: list[i].itemName,
              value: parseInt(list[i].itemValue),
            };
            this.workType.push(opiton);
          }
        })
        .catch(() => {});
    },
    async init() {
      await teamDetail({
        teamsId: this.teamsId,
      }).then((res) => {
        this.title = res.data.data.title;
        this.province = res.data.data.province;
        this.city = res.data.data.city;
        this.county = res.data.data.county;
        this.area_code = res.data.data.areaCode;
        this.address = this.getAddressByDistrictCode(res.data.data.areaCode);
        this.address_detail = res.data.data.addressDetail;
        this.staff = res.data.data.staff;
        this.detail = res.data.data.detail;
        this.serve_des = res.data.data.serveDes;
        this.images = res.data.data.images;
        this.wkTypes = res.data.data.workType;
        this.tel = res.data.data.tel;
        if (res.data.data.failReason) {
          this.fail_reason = res.data.data.failReason.replace(/\n/g, '<br/>');
        }
        this.workers_userId = res.data.data.userId;
        this.status = res.data.data.status;

        if (typeof res.data.data.excessTime == 'undefined') {
          this.isOut = true;
        } else if (new Date() > new Date(res.data.data.excessTime)) {
          this.isOut = true;
        } else {
          this.isOut = false;
        }
        if (this.status !== 3) {
          this.isOut = true;
        }

        this.queryParam.teamsId = this.teamsId;
        this.queryParam.skills = this.wkTypes.toString();
        this.queryParam.areaCode = this.area_code;
        if (this.area_code != null && this.area_code != '') {
          this.queryParam.sort =
            ' field(area_code, ' + this.area_code + ') desc,';
        }
        this.queryParam.sort +=
          " locate('" +
          this.wkTypes +
          "',work_type)=0 asc, locate('" +
          this.wkTypes +
          "',work_type)";
        if (this.wkTypes.length > 1) {
          for (var i = 0; i < this.wkTypes.length; i++) {
            this.queryParam.sort +=
              "asc , locate('" +
              this.wkTypes[i] +
              "',work_type)=0 asc,locate('" +
              this.wkTypes[i] +
              "',work_type)";
          }
        }
        this.queryParam.order = ' asc';
        //查询detail完成后加载更多执行
        this.finished = false;
        let str = window.location.href,
          num = str.indexOf('#'); //取得整个地址栏
        this.link = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ]
        this.$wxShare({
          title: this.title,
          desc: this.detail,
          link: this.link,
          imgUrl: this.images != null ? this.images[0] : null,
        });
      });
    },
    showTel() {
      authInfo().then((res) => {
        this.userId = res.data.data.userId;
        this.mobile = res.data.data.mobile || '';
        this.userStatus = res.data.data.status;
        this.isAttention = res.data.data.isAttention;
        this.directorId = res.data.data.directorId;
        this.userLevel = res.data.data.userLevel;
        this.memberLevel = res.data.data.memberLevel;
        this.powerPRSWLevle = res.data.data.powerPRSWLevle || 0;
        // 如果用户未注册，3秒后今日注册页面

        setTimeout(() => {
          if (this.userStatus == 0) {
            Toast('请先验证手机号!');
            this.$router.push(`/check`);
          }
        }, 1 * 1000);
      });
      //上架状态: 0下架     1审核中    2审核不通过   3下架
      if (this.isOut) {
        this.telText = '商品已下架或者完工！';
        return;
      }
      if (this.userStatus == 0) {
      } else {
        if (this.telText == '查看联系方式') {
          if (this.userLevel == 2 || this.memberLevel == 1) {
            if (this.tel === undefined || this.tel === '') {
              this.telText = '联系方式已过期！';
              return;
            }
            this.telText = '联系电话：' + this.tel;
          } else {
            //继续逻辑处理看看是不是三次之内的用户
            let isAllowed = false;
            isAllowedShowTel({
              projectId: this.teamsId,
            })
              .then((res) => {
                isAllowed = res.data.data || false;
              })
              .then(() => {
                if (isAllowed) {
                  if (this.tel === undefined || this.tel === '') {
                    this.telText = '联系方式已过期！';
                    return;
                  }
                  this.telText = '联系电话：' + this.tel;
                } else {
                  Dialog.confirm({
                    title: '系统提示',
                    message:
                      '每天一次免费查看信息动态 \n是否购买"涂装行业信息动态"月卡会员',
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                  })
                    .then(() => {
                      // on confirm
                      if (this.userStatus == 0) {
                        Dialog.confirm({
                          title: '系统提示',
                          message: '请先登录',
                          confirmButtonText: '确定',
                          cancelButtonText: '取消',
                        })
                          .then(() => {
                            this.$router.push({ path: '/check' });
                          })
                          .catch(() => {});
                        return;
                      }
                      this.pay(2);
                    })
                    .catch(() => {
                      // on cancel
                    });
                }
              });
          }
        } else {
          if (this.tel === undefined || this.tel === '') {
            return;
          }
          this.call();
        }
      }
    },
    pay(type) {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener(
            'WeixinJSBridgeReady',
            onBridgeReady1,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady1);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady1);
        }
      } else {
        this.onBridgeReady1();
      }
    },
    onBridgeReady1() {
      getOrderSign({
        orderId: 1181174,
      }).then((res) => {
        let that = this;

        that.orderSn = res.data.data.orderSn;

        const Mfbank = JSON.parse(res.data.data.info.wcPayData);

        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: Mfbank.appId, //公众号名称，由商户传入
            timeStamp: Mfbank.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: Mfbank.nonceStr, //随机串
            package: Mfbank.package,
            signType: Mfbank.signType, //微信签名方式：
            paySign: Mfbank.paySign, //微信签名
          },
          function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              //跳转到开通会员接口
              setTenCardOnline({
                orderSn: that.orderSn,
                goodId: 1181174,
              }).then((res) => {
                let status = 0;
                if (res.data.errmsg == '成功') {
                  status = 1;
                }
                that.$router.push({
                  name: 'paymentVipStatus',
                  query: {
                    status: status,
                  },
                });
              });
            }
          }
        );
      });
    },

    reInit() {
      Object.assign(this.$data, this.$options.data.call(this));
      document.getElementById('content').scrollTop = 0;
      this.initWkType();
      this.init();
    },
    getAddressByDistrictCode(district_code) {
      if (
        district_code == undefined ||
        district_code == null ||
        district_code == ''
      ) {
        return '地区未知';
      }
      let province_code = district_code.substring(0, 2) + '0000';
      let city_code = district_code.substring(0, 4) + '00';
      let province_name = areaList.province_list[province_code];
      let city_name = areaList.city_list[city_code];
      let district_name = areaList.county_list[district_code];
      return province_name + city_name + district_name;
    },
    itemClick(id) {
      this.$router.replace(`/info/workers-detail/${id}`);
    },
    getSrc(item) {
      let image = logo_default;
      if (item.imgUrl != null && item.imgUrl != '') {
        image = item.imgUrl;
      }
      return image;
    },
    onLoad() {
      if (this.queryParam.page >= this.pages) {
        this.queryParam.page = 0;
        this.list = [];
      }

      this.queryParam.page++;
      listTeam(this.queryParam)
        .then((res) => {
          this.list.push(...res.data.data.list);
          this.loading = false;
          this.pages = res.data.data.pages;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch((e) => {
          this.queryParam.page--;
          this.loading = false;
          this.finished = true;
        });
    },
    call() {
      if (this.userLevel == 2) {
        window.location.href = 'tel:' + this.tel;
      } else {
        if (this.tel === undefined || this.tel === '') {
          return;
        }
        this.call();
      }
    },
    getParams() {
      // 取到路由带过来的参数
      // this.qr_url =
      //   process.env.VUE_APP_BASE_API +
      //   'wechat/#/verify/user?shareId=' +
      //   this.userId;
      cardInfo({
        userId: this.userId,
      }).then((res) => {
        this.avatar = res.data.data.avatar;
        this.qrcode = res.data.data.qrcode || '';
        if (res.data.data.userLevel == 2) {
          this.isManager = true;
        }
      });
    },
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Field.name]: Field,
    [Image.name]: Image,
    [List.name]: List,
    [Icon.name]: Icon,
    [Tag.name]: Tag,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Dialog.Component.name]: Dialog.Component,
    [vueQr.name]: vueQr,
    [Divider.name]: Divider,
  },
};
</script>
<style lang="scss" scoped>
/deep/ .van-field__label {
  width: auto;
}

.van-tag--large {
  font-size: 12px !important;
  padding: 2px 4px !important;
}
.head_icon {
  display: inline-block;
  width: 100%;
  height: 35px;
}

.head_icon_title {
  font-size: 10px;
  display: inline-block;
  width: 100%;
  color: #77787d;
}

.head_icon_value {
  color: #ee3f00;
  display: inline-block;
  width: 100%;
}

.detail_title {
  display: inline-block;
  min-width: 150px;
  font-size: 16px;
  line-height: 30px;
  border-bottom: 1px solid #ee3f00;
}

.useddetail {
  padding: 10px 16px 20px 16px;
}

.useddetail /deep/ .van-field__control {
  border: 1px solid #bbbbbb;
  -webkit-appearance: none;
}

.view-router {
  padding-bottom: 44px;
}

.more_recommend .title {
  flex: 1;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  color: #969799;
  font-size: 12px;
  font-weight: normal;
  margin-top: 0;
}

.more_recommend .van-cell {
  padding: 0px;
}

.more_recommend .cell-span {
  color: #969799;
  font-size: 12px;
}

/deep/ .van-button--default {
  border: 1px solid rgb(238, 63, 0);
}

.img-container {
  display: flex;
  justify-content: center;
  // transform: scale(.4) translateY(-50%);
  img {
    // height: 131.2px !important;
    margin: 0 auto;
    width: 100%;
  }
}

.van-divider {
  margin: 0;
}
</style>
